<template>
  <div class="course">
    <!-- 添加 -->
    <el-form :model="courseForm" label-width="90px" style="margin: 10px 0">
      <el-form-item label="课程名称：">
        <el-input v-model="courseForm.name">
          <template #append>
            <el-button type="primary" @click="addCourse">添加</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 课程列表 -->
    <el-table :data="courseList" style="width: 100%" border>
      <!-- <el-table-column label="编号" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="编号" prop="id" width="80"></el-table-column>

      <el-table-column label="课程名" prop="name"></el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button
            size="small"
            :type="scope.row.is_delete ? '' : 'danger'"
            @click="handleEdit(scope.$index, scope.row)"
            >{{ scope.row.is_delete ? "恢复" : "删除" }}</el-button
          >
          <!-- <el-button
            size="small"
            type="danger"
            v-else
            @click="handleEdit(scope.$index, scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../utils/http";
import { onBeforeMount, onMounted, reactive, ref, toRefs, unref } from "vue";
import { ElMessage } from "element-plus";
export default {
  setup() {
    // 数据对象
    let thus = reactive({
      // 课程数组
      courseList: [
        {
          id: 1,
          name: "123",
        },
      ],
      courseForm: {
        name: null,
      },
    });
    // 生命周期函数

    onBeforeMount(() => {
      getCourseList();
    });

    // 获取课程列表
    function getCourseList() {
      console.log(thus);
      request.get("/course/AllList").then((res) => {
        console.log(res);
        if (res.status != 200) return ElMessage.error(res.message);
        thus.courseList = res.data;
      });
    }
    function addCourse() {
      request.post("/course/add", unref(thus.courseForm)).then((res) => {
        if (res.status != 200) return ElMessage.error(res.message);
        ElMessage.success(res.message);
        getCourseList();
        thus.courseForm.name = null;
      });
    }
    const handleEdit = (index, row) => {
      console.log(index, row);
      request
        .delete(`/course/delete/${row.id}/${row.is_delete ? 0 : 1}`)
        .then((res) => {
          if (res.status != 200) {
            return ElMessage.error(res.message);
          }
          getCourseList();
          ElMessage.success(res.message);
        });
    };
    const handleDelete = (index, row) => {
      console.log(index, row);
    };
    return {
      handleEdit,
      handleDelete,
      ...toRefs(thus),
      addCourse,
      // courseList: thus.value.courseList,
    };
  },
};
</script>

<style lang="less" scoped>
.course {
}
</style>